<template>
    <!-- " -->

  <el-skeleton
    style="width: 100%; display: flex; justify-content: space-between; align-items: center; flex-flow: wrap;"
    :loading="!Boolean(store.state.contaniner.songList.length)"
    :count="1"
    animated
  >
    <template #template>
      <el-skeleton-item variant="image" style="width: 25%; height: 190px;" v-for="item in 8"/>
    </template>
    <template #default>
      <div style="width: 1400px; margin-left: 10px">
        <h2>{{ title }}</h2>
        <el-row :gutter="24" style="margin-left: 0px; margin-right: 0px">
          <el-col :span="6" >
            <el-card shadow="hover"> 
                <div class="count-container">
                <div class="count">
                  <span  class="iconfont icon-bofang"></span>
                  </div> 
                <el-image src="https://p2.music.126.net/WVD-BdxxCyqPEvi_LChCRw==/109951166923395038.jpg"  />
              </div>
            <h1>每日推荐</h1>
            <h1></h1> 
            </el-card>
          </el-col>
          <el-col :span="6" v-for="item in songList" :key="item.id"  >
            <el-card shadow="hover">
              <div class="count-container">
                <div class="count">
                  <span  class="iconfont icon-bofang"></span>
                  </div> 
                <el-image :src="item.picUrl" />
              </div>
            
            <h1>{{palycount}} {{item.playCount}}</h1>
            <h1>{{item.name}}</h1>

            </el-card>
          </el-col>
        </el-row>
      </div> </template
  ></el-skeleton>
</template>

<script lang="ts">
import { el } from "element-plus/lib/locale";
import { computed, defineComponent, nextTick, ref } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  setup() {
    const title = ref("推荐歌单$");
    const store = useStore();
    const palycount = ref('收听人数:')
    const iconShow = ref()

    

    nextTick(() => {
      store.dispatch("contaniner/songList");
      
    });

    return {
      title,
      store,
      songList: computed(() => store.state.contaniner.songList),
      palycount,
    };
  },
});
</script>


<style scoped>
.count-container{
  position: relative;
}
.count{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.count span{
  font-size: 100px;
}
.count-container:hover{
  color: #fff;
}
.el-row {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.imageTitle{
  z-index: 9;
}
.el-card {
  padding: 5px;
  width: 300px;
}

h2 {
  font-size: 20px;
  display: flex;
  margin-left: 15px;
}

.el-row {
}
.el-row:last-child {
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>